<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
        layout:decorate="~{base/layout}">
<div layout:fragment="content">
    <!--med_tittle_section-->
    <div class="med_tittle_section">
        <div class="med_img_overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="med_tittle_cont_wrapper">
                        <div class="med_tittle_cont">
                            <ol class="breadcrumb">
                                <li><a th:href="@{/}">系统首页</a></li>
                                <li>用户中心</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- med_tittle_section End -->
    <!--service section start-->
    <div class="page-container">
        <div class="container">
            <div class="row med_toppadder50 med_bottompadder50">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h2 class="cy-uc-title">用户中心</h2>
                    <div class="panel panel-default panel-view">
                        <div class="panel-body">
                            <div class="cy-tabs">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs nav-justified" role="tablist">
                                    <li class="active">
                                        <a href="javaScript:void(0);"><i class="fa fa-address-card"></i> 我的信息</a>
                                    </li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div class="tab-pane active">
                                        <form action="#" method="post" class="cy-form">
                                            <fieldset>
                                                <div class="row">
                                                    <section>
                                                        <label class="label col col-1">用户名</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static"
                                                               th:text="${user.username}"></p>
                                                        </div>
                                                        <label class="label col col-1">密码</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static" th:text="${user.password}"></p>
                                                        </div>
                                                        <label class="label col col-1">真实姓名</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static"
                                                               th:text="${user.nickname}"></p>
                                                        </div>
                                                        <label class="label col col-1">性别</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static" th:text="${user.sex}"></p>
                                                        </div>
                                                    </section>
                                                    <section>
                                                        <label class="label col col-1">身份证号</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static" th:text="${user.postcard}" id="postcardClose"></p>
                                                        </div>
                                                        <label class="label col col-1">手机</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static" th:text="${user.telephone}" id="telephoneClose"></p>
                                                        </div>

                                                        <label class="label col col-1">学历</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static" th:text="${user.education}">未实现</p>
                                                        </div>
                                                        <label class="label col col-1">政治面貌</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static" th:text="${user.political}"></p>
                                                        </div>
                                                    </section>
                                                    <section>
                                                        <label class="label col col-1">职业</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static" th:text="${user.position}">不详</p>
                                                        </div>

                                                        <label class="label col col-1">所在地区</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static">广东省揭阳市惠来县</p>
                                                        </div>

                                                        <label class="label col col-1">所在镇</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static" th:text="${user.town}"></p>
                                                        </div>

                                                        <label class="label col col-1">所在村</label>
                                                        <div class="col col-2">
                                                            <p class="form-control-static" th:text="${user.village}"></p>
                                                        </div>
                                                    </section>
                                                    <section>
                                                        <label class="label col col-1">详细地址</label>
                                                        <div class="col col-6">
                                                            <p class="form-control-static" th:text="${user.address}"></p>
                                                        </div>
                                                    </section>
                                                </div>
                                            </fieldset>
                                            <footer>
                                                <button type="button" class="button" id="updatePassword_btn"
                                                        th:attr="update-id=${user.id}" onclick="changePassword()">
                                                    修改密码
                                                </button>
                                                <button type="button" class="button" id="update_btn"
                                                        th:attr="update-id=${user.id}" onclick="getUpdateUser()">
                                                    修改信息
                                                </button>
                                            </footer>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 修改用户的模态框 -->
                    <div class="modal fade" id="userUpdateModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title">修改用户信息</h4>
                                </div>
                                <div class="modal-body">
                                    <!--要提交的表单 -->
                                    <form class="form-horizontal" id="form-submit">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">用户名：</label>
                                            <div class="col-sm-7">
                                                <p class="form-control-static"
                                                   id="username_update_input">
                                                </p>
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">真实姓名：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="nickname_update_input" name="nickname"
                                                       placeholder="该用户还未填写真实姓名">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">身份证号：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="postcard_update_input" name="postcard"
                                                       placeholder="该用户还未填写身份证">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">性别：</label>
                                            <div class="col-sm-7">
                                                <div class="example-box">
                                                    <label class="lyear-radio radio-inline"> <input
                                                            type="radio" name="type"
                                                            value="男" checked="checked"><span>男</span>
                                                    </label> <label class="lyear-radio radio-inline"> <input
                                                        type="radio" name="type"
                                                        value="女"> <span>女</span>
                                                </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">手机号：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="telephone_update_input" name="telephone"
                                                       placeholder="该用户还未填写手机号">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">学历：</label>
                                            <div class="col-sm-7">
                                                <select class="form-control" name="education" id="education_update_select">
                                                    <option value="">请选择</option>
                                                    <option th:each="educationLevel:${educationList}"
                                                            th:value="${educationLevel}"
                                                            th:text="${educationLevel}"></option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">职业：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="position_update_input" name="position"
                                                       placeholder="该用户还未填写职业">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">政治面貌：</label>
                                            <div class="col-sm-7">
                                                <select class="form-control" name="political" id="political_update_select">
                                                    <option value="">请选择</option>
                                                    <option th:each="politicalLevel:${politicalList}"
                                                            th:value="${politicalLevel}"
                                                            th:text="${politicalLevel}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">所在镇：</label>
                                            <div class="col-sm-7">
<!--                                                <input type="text" class="form-control"-->
<!--                                                       id="town_update_input" name="town"-->
<!--                                                       placeholder="该用户还未填写所在镇">-->
<!--                                                <span class="help-block"></span>-->
                                                <select class="form-control" name="town" id="town_update_input">
                                                    <option value="">请选择</option>
                                                    <option th:each="town:${townList}"
                                                            th:value="${town}"
                                                            th:text="${town}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">所在村：</label>
                                            <div class="col-sm-7">
                                                <select class="form-control" name="education" id="village_update_select">
                                                    <option value="">请选择</option>
                                                    <option th:each="villageLevel:${villageList}"
                                                            th:value="${villageLevel}"
                                                            th:text="${villageLevel}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">详细地址：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="address_update_input" name="address"
                                                       placeholder="该用户还未填写详细地址">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary"  th:attr="update-id=0"
                                            id="user_update_btn" onclick="updateUser()">更新
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

<!--                    修改用户密码-->
                    <div class="modal fade" id="userUpdatePasswordModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title">修改密码</h4>
                                </div>
                                <div class="modal-body">
                                    <!--要提交的表单 -->
                                    <form class="form-horizontal" id="form-submit-password">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">原始密码：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="oldPassword_input" name="oldPassword"
                                                       placeholder="请输入原始密码">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">新密码：</label>
                                            <div class="col-sm-7">
                                                <input type="password" class="form-control"
                                                       id="newPassword_input" name="newPassword"
                                                       placeholder="请输入新密码">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">再次输入新密码：</label>
                                            <div class="col-sm-7">
                                                <input type="password" class="form-control"
                                                       id="againNewPassword_input" name="againNewPassword"
                                                       placeholder="请再次输入新密码">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary"  th:attr="update-id=0"
                                            id="user_updatePassword_btn" onclick="updateUserPassword()">更新
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--service section end-->
<!--    <script th:src="@{/js/jquery_min.js}"></script>-->
<!--    <script th:src="@{/js/bootstrap.min.js}"></script>-->
<!--    <script th:src="@{/js/wow.min.js}"></script>-->
<!--    <script th:src="@{/js/custom.js}"></script>-->
<!--    <script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>-->
<!--    <script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>-->
<!--    <script th:src="@{/layer/layer.js}"></script>-->
<!--    &lt;!&ndash;富文本编辑框js&ndash;&gt;-->
<!--    <script th:src="@{/js2/wangEditor.js}"></script>-->
    <script th:inline="javascript" type="text/javascript">

        window.onload = function (){
            console.log("隐藏");
            console.log($("#postcardClose").text());
            var postcard = $("#postcardClose").text().substring(0, 3)+"***********"+$("#postcardClose").text().substr($("#postcardClose").text().length-4);
            var telephone = $("#telephoneClose").text().substring(0, 3)+"****"+$("#telephoneClose").text().substr($("#telephoneClose").text().length-4);
            $("#postcardClose").text(postcard);
            $("#telephoneClose").text(telephone);
        }

        function geTel(tel){
            return tel.substring(0, 3)+"****"+tel.substr(tel.length-4);
        }

        //点击编辑按钮时触发事件
        // $(document).on("click", "#update_btn", function () {
            function getUpdateUser(){
            //根据用户id发送ajax请求，查出用户信息并显示
            getUserInfo($("#update_btn").attr("update-id"));
            //把用户的id传递给模态框的更新按钮
            $("#user_update_btn").attr("update-id", $("#update_btn").attr("update-id"));
            console.log($("#user_update_btn").attr("update-id"));
            $("#userUpdateModal").modal({
                backdrop: "static"
            });
        }

        //根据id查出用户信息并显示
        function getUserInfo(id) {
            $.ajax({
                // url: "/platform/system/user/getUserById/" + id,
                url: "/platform/system/user/getUserById?id=" + id,
                type: "GET",
                success: function (result) {
                    var user = result.extend.user;

                    //显示数据之前先清除一下校验样式，如果有的话
                    reset_form("#userUpdateModal form");

                    $("#username_update_input").text(user.username);
                    $("#nickname_update_input").val(user.nickname);
                    $("#postcard_update_input").val(user.postcard);
                    $("#userUpdateModal input[name=type]").val([user.sex]);
                    $("#telephone_update_input").val(user.telephone);
                    $("#education_update_select").val(user.education);
                    // $("#education_update_input").val(user.education);
                    $("#position_update_input").val(user.position);
                    // $("#political_update_input").val(user.political);
                    $("#political_update_select").val(user.political);
                    $("#town_update_input").val(user.town);
                    $("#village_update_select").val(user.village);
                    $("#address_update_input").val(user.address);

                }
            });
        }

        //点击更新，更新用户信息
        // $("#user_update_btn").click(function () {
        // $(document).click("button#user_update_btn","click",function(){
        function updateUser(){
            //清空表单样式
            console.log("点击更新");
            console.log($("#user_update_btn").attr("update-id"));
            clean_form("#userUpdateModal form");
            var nickname = $("#nickname_update_input").val();
            var postcard = $("#postcard_update_input").val();
            // var sex = $("#sex_update_input").val();
            var telephone = $("#telephone_update_input").val();
            var education = $("#education_update_select").val();
            var position = $("#position_update_input").val();
            var political = $("#political_update_select").val();
            var town = $("#town_update_input").val();
            var village = $("#village_update_select").val();
            var address = $("#address_update_input").val();

            //匹配汉字(nickname)
            var nicknameRegex = /^[\u4e00-\u9fa5]{2,10}$/;
            if (nicknameRegex.test(nickname) === false) {
                show_validate_msg("#nickname_update_input",
                    "error", "真实姓名不合法");
                return false;

            }

            //匹配手机号码
            var telephoneRegex = /^1[3,5,8]\d{9}$/;
            if (telephoneRegex.test(telephone) === false) {
                show_validate_msg("#telephone_update_input",
                    "error", "手机号不合法");
                return false;

            }
            var postcardRegex = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if (postcardRegex.test(postcard) === false) {
                show_validate_msg("#postcard_update_input",
                    "error", "身份证号不合法");
                return false;
            }


            //2、发送ajax请求保存更新的员工数据
            $.ajax({
                // url: "/platform/system/user/updateUser/" + $(this).attr("update-id"),
                url: "/platform/system/user/updateUser?userId=" + $("#user_update_btn").attr("update-id"),
                type: "PUT",
                // data: $("#userUpdateModal form").serialize(),
                data:{
                    "nickname":nickname,
                    "postcard":postcard,
                    "sex":$("#userUpdateModal input:radio:checked").val(),
                    "telephone":telephone,
                    "education":education,
                    "position":position,
                    "political":political,
                    "town":town,
                    "village":village,
                    "address":address
                },
                success: function (result) {
                    if (result.code === 100) {
                        $("#userUpdateModal").modal('hide');
                        window.alert('用户信息修改成功！');
                        setTimeout(function () {
                            location.href = "/platform/user/userCenterUI";
                        }, 1000);
                    } else {
                        window.alert('用户信息修改失败！');
                    }
                }
            });
        }

        // 弹窗更新密码
        function changePassword(){
            //把用户的id传递给模态框的更新密码按钮
            $("#user_updatePassword_btn").attr("update-id", $("#updatePassword_btn").attr("update-id"));
            console.log($("#user_updatePassword_btn").attr("update-id"));
            $("#userUpdatePasswordModal").modal({
                backdrop: "static"
            });
        }
        // 更改密码
        function updateUserPassword(){
            clean_form("#userUpdatePasswordModal form");
            var oldPassword = $("#oldPassword_input").val();
            var newPassword = $("#newPassword_input").val();
            var againNewPassword = $("#againNewPassword_input").val();
            var id = $("#user_updatePassword_btn").attr("update-id");
            console.log(id);
            if (oldPassword.length === 0){
                show_validate_msg("#oldPassword_input",
                    "error", "请输入原始密码");
            }
            if (newPassword.length === 0){
                show_validate_msg("#newPassword_input",
                    "error", "新密码不能为空");
            }
            if (newPassword !== againNewPassword) {
                show_validate_msg("#againNewPassword_input",
                    "error", "新密码两次输入不一致");
                return false;
            }
            $.ajax({
                // url: "/platform/system/user/updateUser/" + $(this).attr("update-id"),
                url: "/platform/user/updateUserPassword",
                type: "post",
                dataType: 'json',
                data:{
                    "id":id,
                    "oldPassword":oldPassword,
                    "newPassword":newPassword
                },
                success: function (result) {
                    if (result.code === 200) {
                        $("#userUpdatePasswordModal").modal('hide');
                        confirm("修改成功,请重新登录!"); //在页面上弹出对话框
                        setTimeout(function () {
                            location.href = "/platform/loginUI";
                        }, 1000);
                    } else {
                        alert(result.message);
                    }
                }
            });
        }
        //清空表单样式及内容
        function reset_form(ele) {
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }

        //清空表单样式
        function clean_form(ele) {
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }
        //显示校验结果的提示信息
        function show_validate_msg(ele, status, msg) {
            //清除当前元素的校验状态
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text("");
            if ("success" === status) {
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            } else if ("error" === status) {
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }

    </script>
</div>
</html>
